<template>
    <div style="padding: 10px">
      <div class="top">
        <div class="common-tab" style="height: 200px;width: 20%;background: #F3C63D;">
          <div class="tab-text" style="font-size: 50pt;color: #ffffff">{{scheduleInfo.matchCode}}</div>
        </div>
        <div class="common-tab" style="height: 200px;width: 59%;background: #F3C63D">
          <div style="height: 100px;background: #DBDBDB">
            <div class="tab-text" style="font-size: 40pt">{{countdown}}</div>
          </div>
          <div style="height: 100px;background: #9DC3E6">
            <div class="tab-text" style="font-size: 40pt;color: #ffffff">{{scheduleInfo.scheduleName}}</div>
          </div>
        </div>
        <div class="common-tab" style="height: 200px;width: 20%;">
          <div style="height: 100px;background: #C9C9C9">
            <div class="tab-text" style="font-size: 40pt">{{scheduleInfo.matchStatus1}}</div>
          </div>
          <div style="height: 100px;background: #5B9BD5">
            <div class="tab-text" style="font-size: 40pt;color: #ffffff">{{scheduleInfo.matchStatus2}}</div>
          </div>
        </div>
      </div>
      <div style="background-color:#BDD7EE; " v-if="scheduleInfo.type == 1 || (scheduleInfo.type == 2 && scheduleInfo.twoTime && boxCheck == 0)">
        <div style="width: 60%;" class="common-tab">
          <div>
            <div class="tab-text" style="font-size: 35pt;padding-top: 100px;">{{scheduleInfo.blueTeam}}</div>
            <div class="tab-text" style="font-size: 50pt;padding-top: 30px;">{{scheduleInfo.bluePlayer}}</div>
          </div>
          <div class="tab-text" style="padding-top: 100px;padding-bottom: 150px;" >
            <div>
              <div>
                  <div class="common-tab" >
                    <div class="tab-text" style="text-align: center;background: #0F974C;width:80px;height:35px">J</div>
                  </div>
                  <div class="common-tab" v-for="(item,index) in matchRefereeScoreList" style="border: 1px #ffffff solid">
                    <div class="tab-text" v-if="item.isLogin == 1" style="text-align: center;background: #0F974C;width:80px;height:35px">{{index+1}}</div>
                    <div class="tab-text" v-else style="text-align: center;background: #ADB9CA;width:80px;height:35px">{{index+1}}</div>
                  </div>
              </div>
              <div>
                <div class="common-tab">
                  <div class="tab-text" style="text-align: center;background: #ADB9CA;width:80px;height:35px;border-bottom: 1px #ffffff solid;">A</div>
                  <div class="tab-text" style="text-align: center;background: #ADB9CA;width:80px;height:35px">P</div>
                </div>
                <div v-for="(item, index) in matchRefereeScoreList" class="common-tab" style="border: 1px #ffffff solid">
                  <div class="tab-text" v-if="isShow == 1" style="text-align: center;background: #D0CECE;width:80px;height:35px;border-bottom: 1px #ffffff solid;">{{item.accuracy}}</div>
                  <div class="tab-text" v-else style="text-align: center;background: #D0CECE;width:80px;height:35px;border-bottom: 1px #ffffff solid;"></div>
                  <div class="tab-text" v-if="isShow == 1" style="text-align: center;background: #D0CECE;width:80px;height:35px">{{item.expressiveness}}</div>
                  <div class="tab-text" v-else style="text-align: center;background: #D0CECE;width:80px;height:35px"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div style="width: 39%" class="common-tab">
          <div class="tab-text">
            <table border="3" cellspacing="0" cellpadding="0" style="border: 3px #ffffff solid" v-if="scheduleInfo.type == 1 || (scheduleInfo.type == 2 && scheduleInfo.twoTime && boxCheck == 0)">
              <thead>
                <tr v-if="boxCheck == 0">
                  <td width="150" height="40" style="text-align: center;background: #ADB9CA;">A</td>
                  <td width="150" height="40" style="text-align: center;background: #ADB9CA;">P</td>
                </tr>
              </thead>
              <tbody v-if="boxCheck == 0">
                <td  height="40" style="text-align: center;background: #8497B0;color: #ffffff">{{totlaLogicScore.A}}</td>
                <td  height="40" style="text-align: center;background: #8497B0;">{{totlaLogicScore.P}}</td>
              </tbody>
              <tbody v-else-if="scheduleInfo.twoTime && boxCheck == 1">
              <td  height="40" style="text-align: center;background: #8497B0;color: #ffffff">{{totlaLogicScore.T1}}</td>
              <td  height="40" style="text-align: center;background: #8497B0;">{{totlaLogicScore.T2}}</td>
              </tbody>
            </table>
          </div>
          <div class="tab-text" style="padding-top: 100px" v-if="scheduleInfo.type == 1 || (scheduleInfo.type == 2 && scheduleInfo.twoTime && boxCheck == 0)">
            <div>
              <div style="background: #BC9A30;height: 60px;width: 350px;border: 5px #ffffff solid;">
                <div class="tab-text" style="font-size: 35pt">TOTAL</div>
              </div>
              <div style="background: #EFEC4F;height: 260px;width: 350px;border: 5px #ffffff solid;">
                <div class="tab-text" style="font-size: 80pt" v-if="!scheduleInfo.twoTime">
                  {{totlaLogicScore.T}}
                </div>
                <div class="tab-text" style="font-size: 80pt" v-if="scheduleInfo.twoTime">
                  {{totlaLogicScore.T}}
                </div>
                <div class="tab-text" style="font-size: 80pt" v-else-if="scheduleInfo.twoTime && boxCheck == 0">
                  {{totlaLogicScore.T}}
                </div>
                <div class="tab-text" style="font-size: 80pt" v-else-if="scheduleInfo.twoTime && boxCheck == 1">
                  {{totlaLogicScore.T3}}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-else-if="scheduleInfo.type == 2 && !scheduleInfo.twoTime" style="padding-top: 100px;background: #BDD7EE;height: 730px">
        <div class="common-tab" style="padding-left: 5px" >
          <div class="tab-text" :style="totlaLogicScore.winner0 > index ? 'background: #FF0000':'background: #C9C9C9'" v-for="(item, index) in  7" :key="totlaLogicScore.winner0" style="border: 1px solid #FFFFFD;width: 60px">&nbsp;</div>
        </div>
        <div class="common-tab" style="width: 40%;padding-top: 20px;">
          <div class="tab-text" style="color: #FF0000;font-size: 40pt;font-weight: bold;padding-bottom: 20px;">{{scheduleInfo.redTeam}}</div>
          <div class="tab-text" style="color: #FF0000;font-size: 30pt;font-weight: bold" v-for="item in redPlayer" :key="item">{{item}}</div>
        </div>
        <div class="common-tab" style="width: 40%;padding-top: 20px;">
          <div class="tab-text" style="color: #006DBF;font-size: 40pt;font-weight: bold;padding-bottom: 20px;">{{scheduleInfo.blueTeam}}</div>
          <div class="tab-text" style="color: #006DBF;font-size: 30pt;font-weight: bold;" v-for="item in bluePlayer" :key="item">{{item}}</div>
        </div>
        <div class="common-tab" style="float: right;padding-right: 5px;">
          <div class="tab-text" :style="totlaLogicScore.winner1 > index ? 'background: #6994CC':'background: #C9C9C9'" v-for="(item, index) in  7" :key="totlaLogicScore.winner1" style="border: 1px solid #FFFFFD;width: 60px">&nbsp;</div>
        </div>
      </div>
      <div v-else-if="scheduleInfo.type == 2 && scheduleInfo.twoTime && boxCheck == 1" style="padding-top: 100px;background: #BDD7EE;height: 730px;">
        <div class="common-tab" style="padding-left: 5px;width: 10%"></div>
        <div class="common-tab" style="width: 40%;padding-top: 20px;">
          <div class="tab-text" style="color: #FF0000;font-size: 40pt;font-weight: bold;padding-bottom: 20px;">{{scheduleInfo.redTeam}}</div>
          <div class="tab-text" style="color: #FF0000;font-size: 30pt;font-weight: bold" v-for="item in redPlayer" :key="item">{{item}}</div>
          <div class="tab-text" :style="totlaLogicScore.T2 > totlaLogicScore.T1 ? 'background: #D2C810':'background: #ffffff'" style="color: #006DBF;font-size: 40pt;font-weight: bold;">{{totlaLogicScore.T2}}</div>
        </div>
        <div class="common-tab" style="width: 40%;padding-top: 20px;">
          <div class="tab-text" style="color: #006DBF;font-size: 40pt;font-weight: bold;padding-bottom: 20px;">{{scheduleInfo.blueTeam}}</div>
          <div class="tab-text" style="color: #006DBF;font-size: 30pt;font-weight: bold;" v-for="item in bluePlayer" :key="item">{{item}}</div>
          <div class="tab-text" :style="totlaLogicScore.T2 < totlaLogicScore.T1 ? 'background: #D2C810':'background: #ffffff'" style="color: #006DBF;font-size: 40pt;font-weight: bold;">{{totlaLogicScore.T1}}</div>
        </div>
      </div>
      <el-dialog :visible.sync="orderIndexDialog"  width="1200px">
        <div class="top">
          <div class="common-tab" style="height: 200px;width: 20%;background: #F3C63D;">
            <div class="tab-text" style="font-size: 50pt;color: #ffffff">{{groupLevel}}</div>
          </div>
          <div class="common-tab" style="height: 200px;width: 59%;background: #F3C63D">
            <div style="height: 100px;background: #DBDBDB">
              <div class="tab-text" style="font-size: 40pt">排名公示</div>
            </div>
            <div style="height: 100px;background: #9DC3E6">
              <div class="tab-text" style="font-size: 40pt;color: #ffffff">{{scheduleInfo.scheduleName}}</div>
            </div>
          </div>
          <div class="common-tab" style="height: 200px;width: 20%;">
            <div style="height: 100px;background: #C9C9C9">
              <div class="tab-text" style="font-size: 40pt">{{scheduleInfo.matchStatus1}}</div>
            </div>
            <div style="height: 100px;background: #5B9BD5">
              <div class="tab-text" style="font-size: 40pt;color: #ffffff">{{scheduleInfo.matchStatus2}}</div>
            </div>
          </div>
        </div>
        <div>
          <el-table  align="center" :data="orderTotalScoreList" >
            <el-table-column class-name="small-padding fixed-width" label="" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{scope.$index + 1}}</span>
              </template>
            </el-table-column>
            <el-table-column class-name="small-padding fixed-width" label="" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{scope.row.bluePlayer}}</span>
              </template>
            </el-table-column>
            <el-table-column class-name="small-padding fixed-width" label="" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{scope.row.blueTeam}}</span>
              </template>
            </el-table-column>
            <el-table-column class-name="small-padding fixed-width" label="" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{scope.row.sumScore}}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div style="height: 100px;padding-top: 40px;">
          <div class="tab-text" style="font-size: 15pt;">此为实时排名，随比赛进度更新</div>
        </div>
      </el-dialog>
    </div>
</template>

<script>
  import { getScheduleInfo, getRefereeScoreList } from '@/api/matchSchedule'
  import { totlaShowLogicScore, totlaLogicScore, orderTotalScore } from '@/api/matchScore'
  export default {
    data() {
      return {
        countdown: '00:00',
        websocket: null,
        intervalFunc: null,
        hour: null,
        minute: null,
        second: null,
        matchId: this.$route.query.matchId,
        scheduleId: this.$route.query.scheduleId,
        scheduleInfo: {},
        matchScoreList: [],
        totlaLogicScore: {},
        orderIndexDialog: false,
        intervalOrderFunc: null,
        boxCheck: 0,
        matchRefereeScoreList: null,
        isShow: 0,
        isTempShow: 0,
        orderTotalScoreList: null,
        groupLevel: null
      }
    },
    mounted() {
      if ('WebSocket' in window) {
        this.websocket = new WebSocket('ws://139.9.71.200/websocket/' + this.scheduleId + '/' + this.$store.state.user.matchAdminId + 'show/play/01:30')
        this.initWebSocket()
      } else {
        alert('当前浏览器 Not support websocket')
      }
    },
    beforeDestroy() {
      this.onbeforeunload()
    },
    created() {
      this.getScheduleInfoData()
      window.setInterval(() => {
        if (this.boxCheck === 0) {
          this.getRefereeScoreList()
        }
      }, 5000)
    },
    computed: {
      bluePlayer: function() {
        return this.scheduleInfo.bluePlayer.split(' ')
      },
      redPlayer: function() {
        return this.scheduleInfo.redPlayer.split(' ')
      }
    },
    methods: {
      getScheduleInfoData() {
        getScheduleInfo({ matchScheduleId: this.scheduleId }).then(res => {
          this.scheduleInfo = res.data.data
          this.groupLevel = this.scheduleInfo.matchCode.substr(0, 1)
          this.getRefereeScoreList()
        })
      },
      totlaShowLogicScoreMe() {
        totlaShowLogicScore({ matchScheduleId: this.scheduleId, type: 1, scheduleType: this.scheduleInfo.type }).then(res => {
          this.totlaLogicScore = res.data.data
        })
      },
      totlaLogicScoreMe() {
        var obj = {
          matchScheduleId: this.scheduleId,
          scheduleType: this.scheduleInfo.type,
          scoreType: this.scheduleInfo.lockTwoTime
        }
        totlaLogicScore(obj).then(res => {
          this.totlaLogicScore = res.data.data
        })
      },
      getRefereeScoreList() {
        var obj = {
          matchScheduleId: this.scheduleId,
          matchId: this.scheduleInfo.matchId,
          matchAdminId: this.$store.state.user.matchAdminId,
          scoreType: this.scheduleInfo.lockTwoTime
        }
        getRefereeScoreList(obj).then(res => {
          this.matchRefereeScoreList = res.data.data
          for (var i = this.matchRefereeScoreList.length; i < 7; i++) {
            var item = {
              isLogin: 0
            }
            this.matchRefereeScoreList.push(item)
          }
        })
      },
      getOrderLogicScoreIndex() {
        var obj = {
          matchScheduleId: this.scheduleId,
          matchId: this.scheduleInfo.matchId
        }
        orderTotalScore(obj).then(res => {
          this.orderTotalScoreList = res.data.data
        })
      },
      initWebSocket() {
        this.websocket.onerror = this.setErrorMessage
        this.websocket.onopen = this.setOnopenMessage
        this.websocket.onmessage = this.setOnmessageMessage
        this.websocket.onclose = this.setOncloseMessage
        window.onbeforeunload = this.onbeforeunload
      },
      setErrorMessage() {
        this.data = 'WebSocket连接发生错误' + '   状态码：' + this.websocket.readyState
      },
      setOnopenMessage() {
        this.data = 'WebSocket连接成功' + '   状态码：' + this.websocket.readyState
        window.setInterval(() => {
          var obj = {
            status: 'thread',
            sid: this.scheduleId,
            uid: this.$store.state.user.matchAdminId
          }
          this.websocket.send(JSON.stringify(obj))
        }, 3000)
      },
      setOnmessageMessage(event) {
        var obj = JSON.parse(event.data)
        debugger
        if (obj.status === 'waiting') {
          // this.countdown = obj.countdown
        } else if (obj.status === 'start') {
          // this.countdown = obj.countdown
          this.countdownMe()
        } else if (obj.status === 'suspend') {
          window.clearInterval(this.intervalFunc)
          this.countdown = this.minute + ':' + this.second
          var obj1 = {
            status: 'suspend1',
            sid: this.scheduleId,
            countdown: this.countdown,
            uid: this.$store.state.user.matchAdminId
          }
          this.websocket.send(JSON.stringify(obj1))
        } else if (obj.status === 'stop') {
          this.countdown = '00:00'
          window.clearInterval(this.intervalFunc)
        } else if (obj.status === 'publish') {
          this.totlaShowLogicScoreMe()
          this.isShow = 1
          this.isTempShow = 1
        } else if (obj.status === 'orderIndexPublish') {
          this.orderIndexDialog = true
          this.getOrderLogicScoreIndex()
          this.intervalOrderFunc = window.setInterval(() => {
            this.orderIndexDialog = false
            window.clearInterval(this.intervalOrderFunc)
          }, 10000)
        } else if (obj.status === 'updateInfo') {
          this.getScheduleInfoData()
        } else if (obj.status === 'switchSchedule') {
          window.clearInterval(this.intervalOrderFunc)
          this.scheduleId = obj.sid
          this.getScheduleInfoData()
          this.totlaShowLogicScoreMe()
          this.isShow = 0
          this.isTempShow = 0
        } else if (obj.status === 'twoTimefinalShow') {
          this.boxCheck = obj.boxCheck
          if (this.boxCheck === 1) {
            this.totlaLogicScoreMe()
            this.isShow = 0
          } else if (this.boxCheck === 0) {
            this.totlaShowLogicScoreMe()
            if (this.isTempShow === 1) {
              this.isShow = 1
            }
          }
        }
      },
      countdownMe() {
        if (this.intervalFunc !== null) {
          window.clearInterval(this.intervalFunc)
        }
        // var time = 0
        var countdownArray = this.countdown.split(':')
        this.minute = parseInt(countdownArray[0]) || 0
        this.second = parseInt(countdownArray[1]) || 0
        this.hour = 0
        // if (this.minute > 0) {
        //   time = this.minute * 60
        // }
        // if (this.second > 0) {
        //   time = time + this.second
        // }
        this.intervalFunc = window.setInterval(() => {
          this.hour = parseInt(this.hour)
          this.minute = parseInt(this.minute)
          this.second = parseInt(this.second)
          if (this.second >= 0) {
            this.second = this.second + 1
          }
          if (this.second >= 60) {
            this.second = 0
            this.minute = this.minute + 1
          }
          if (this.minute >= 60) {
            this.minute = 0
            this.hour = this.hour + 1
          }
          this.minute = parseInt(this.minute) < 10 ? '0' + this.minute : this.minute
          this.second = parseInt(this.second) < 10 ? '0' + this.second : this.second
          this.countdown = this.minute + ':' + this.second

          // time = time - 1
          // if (time >= 60) {
          //   this.minute = Math.floor(time / 60)
          //   this.second = time % 60
          //   if (this.minute >= 60) {
          //     this.hour = Math.floor(this.minute / 60)
          //     this.minute = this.minute % 60
          //   } else {
          //     this.hour = 0
          //   }
          // } else {
          //   this.second = time
          //   this.hour = 0
          //   this.minute = 0
          // }
          // this.hour = parseInt(this.hour) < 10 ? '0' + this.hour : this.hour
          // this.minute = parseInt(this.minute) < 10 ? '0' + this.minute : this.minute
          // this.second = parseInt(this.second) < 10 ? '0' + this.second : this.second
          // this.countdown = this.minute + ':' + this.second
          // if (time < 1) {
          //   var obj = {
          //     status: 'end',
          //     sid: this.scheduleId,
          //     uid: this.$store.state.user.matchAdminId
          //   }
          //   this.websocket.send(JSON.stringify(obj))
          //   window.clearInterval(this.intervalFunc)
          // }
        }, 1000)
      },
      setOncloseMessage() {
        this.data = 'WebSocket连接关闭' + '   状态码：' + this.websocket.readyState
      },
      onbeforeunload() {
        this.closeWebSocket()
      },
      closeWebSocket() {
        this.websocket.close()
      }
    }
  }
</script>

<style scoped>
  .top{
    height: 210px;

  }
  .tab-text{
    height: 100%;
    display: -webkit-box;             /*flex弹性布局*/
    -webkit-box-align: center;
    -webkit-box-pack: center;
    font-size: 12pt;
  }
</style>
